<template>
	<view>
		<navBar></navBar>
		<view class="content">
			<view class="status">
				<view class="status-image mgcen">
					<image src="../../static/success.png" mode="scaleToFill" class="status-image" v-if="success"></image>
					<image src="../../static/falied.png" mode="scaleToFill" class="status-image" v-if="!success"></image>
				</view>
				<view class="status-info mt20 fs24 c3" v-if="success" @click="linkMyGroup">可在个人中心-查看<text class="c46f">我的拼团</text></view>
				<view class="status-info mt20 fs24 c3" v-if="!success">拼团失败</view>
			</view>
			<view class="mt20">
				<groupGoods></groupGoods>
			</view>
			<view class="countdown flex mt20">
				<text>{{success?"拼团倒计时：":"拼团已超时"}}</text>
				<u-count-down v-if="success" :timestamp="timestamp" :show-days="true" separator="zh" :hide-zero-day="true" bg-color="#efefef"
				 font-size="28" color="#333333" height="48"></u-count-down>
			</view>
		</view>
		<view class="client mt20">
			<view class="client-tit fs26 c3">邀请2位好友，团满即可拼团成功</view>
			<view class="flex client-head">
				<u-avatar v-for="(head,idex) in src" :key="idex" :src="head" size="80" class="ml20 mr20"></u-avatar>
			</view>
			<view class="client-btn">
				<u-button :custom-style="btnPlus" hair-line="false" shape="circle">邀请好友拼团</u-button>
			</view>
		</view>
		<view class="mt20">
			<view>
				<u-tabs :list="tabList" :is-scroll="false" font-size="28" height="88" bar-width="56" :bar-style="tabActive"
				 active-color="#171919" inactive-color="#666666" :current="current" @change="change"></u-tabs>
			</view>
			<view class="info fs24 c3 lH42" v-if="current == 0">
				<view>拼团流程：</view>
				<view>1、选择心仪商品 2 支付开团或参团 3 邀请好友参团 4 达到人数团购成功</view>
				<view>2、用户发起拼团后24小时内有效，超时则拼团失败并自动退款，请尽快邀请好友参团。</view>
				<view>3、在活动期间发起或参与团购后，团购商品将在拼团成功后2-3天开始发货。</view>
				<view>4、团购有效期内，参团人数不足或商品已被抢光则拼团失败并自动退款。</view>
				<view>5、若由于超时拼团失败，在活动结束前可再次发起拼团或参与好友团购。</view>
				<view>6、同一商品在活动期间只能购买1次，拼团成功的用户无法重新参与活动。</view>
				<view>7、退款说明：系统会在1-2天内提交微信处理，微信审核后在2-5个工作日自动原路退款至您的支付账号。</view>
				<view>8、在参与活动的过程中，如果发现违规行为（违规行为包括但不仅限于恶意刷单、无效手机号参与等），天天果园将根据自身合理判断取消用户的违规订单，封闭违规账号，并有权撤销违规交易。</view>
			</view>
			<view v-if="current == 1">
				<u-parse :html="content"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from "../../components/common/u-navbar/u-navbar.vue"
	import groupGoods from "../../components/groupbuy/top-product-details.vue"
	export default {
		components: {
			navBar,
			groupGoods
		},
		data() {
			return {
				success: true,
				timestamp: 86405,
				groupnum: 3,
				src: ["/static/header.jpg"],
				btnPlus: {
					width: "690rpx",
					height: "80rpx",
					bordeRadius: "40rpx",
					background: " #F74F6B",
					fontSize: "30rpx",
					color: "#FFFFFF"
				},
				current: 0,
				tabList: [{
					name: '拼团规则'
				}, {
					name: '商品详情'
				}],
				tabActive: {
					background: "#FCB900"
				},
				content: `<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
						  <img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
						  <img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />`
			}
		},
		created() {
			this.setSrc();
			this.setBtnBgColor();
		},
		methods: {
			linkMyGroup() {
				uni.navigateTo({
					url: "/pages/my/group"
				})
			},
			setSrc() {
				for (let i = this.src.length; i < this.groupnum; i++) {
					this.src.push("/static/pending.png")
				}
				console.log(this.src)
			},
			change(index) {
				this.current = index;
			},
			setBtnBgColor() {
				if (this.success == false) {
					this.btnPlus.background = "#CCCCCC"
				}
			}
		}
	}
</script>

<style scoped>
	.status {
		padding: 32rpx 0;
		background: #FFFFFF;
	}

	.status-image {
		width: 91rpx;
		height: 86rpx;
	}

	.mgcen {
		margin: 0 auto;
	}

	.status-info {
		text-align: center;
	}

	.c46f {
		color: #456EF7;
	}

	.countdown {
		padding: 24rpx 0;
		background: #FFFFFF;
		justify-content: center;
	}

	.client {
		background: #FFFFFF;
	}

	.client-tit {
		padding: 30rpx 0 24rpx;
		text-align: center;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.client-head {
		padding: 32rpx 0;
		justify-content: center;
	}

	.client-btn {
		padding: 25rpx 30rpx;
	}

	.info {
		padding: 40rpx 32rpx;
		background: #FFFFFF;
	}

	.info>view {
		padding: 10rpx 0;
	}
</style>
